<template>
  <el-container class="templateContainer">
    <el-aside class="templatePaneL">
      <el-button type="success" size="mini" @click="dialogVisible('添加')" class="addClick">{{$t('添加')}}</el-button>
      <div class="templateBorder">
        <el-tree :props="props" class="templateTree" ref="templateTree" :data="templateList" node-key="title" :default-expanded-keys="expandedList" @node-expand="nodeExpand" @node-collapse="nodeCollapse" @node-click='nodeClick'>
        </el-tree>
      </div>
      <template-dialog v-if="TemplateDialogVisible" @listData='listData' @nodeClick='nodeClick' @templateAppData='templateAppData' ref="refTemplateDialogVisible"></template-dialog>
    </el-aside>
    <el-main class="strategyFatherBox" style="width: 100%;padding:5px 20px;">
      <el-table size='mini' ref="multipleTable" :data="appList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" align='center' width="55"></el-table-column> -->
        <el-table-column prop="showtitle" align='center' :label="$t('名称')" min-width="150">
          <template slot-scope="scope">
            <tooltip :copyText="scope.row.showtitle" class="wid190">
            </tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="desc" align='center' :label="$t('描述')" min-width="250">
          <template slot-scope="scope">
            <tooltip :copyText="scope.row.desc" class="wid190">
            </tooltip>
          </template>
        </el-table-column>
        <el-table-column align='center' fixed="right" :label="$t('操作')" :width="(buttonWidthFlag && lang === 'en')?'500':'370'">
          <template slot-scope="scope">
            <el-button type="success" plain size="mini" @click="dialogVisible('模板详情', scope.row)" :class="'details' + (scope.$index + 1)">{{$t('模板详情')}}</el-button>
            <el-button type="success" plain size="mini" v-if="scope.row.deleteFlag" @click="dialogVisible('编辑', scope.row)" :class="'edit' + (scope.$index + 1)">{{$t('编辑模板')}}</el-button>
            <el-button type="success" plain size="mini" @click="appDialogVisible(scope.row)" :class="'users' + (scope.$index + 1)">{{$t('应用模板')}}</el-button>
            <el-button type="danger" plain size='mini' v-if="scope.row.deleteFlag" @click="deleteApp(scope.row)" :class="'del' + (scope.$index + 1)">{{$t('删除')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <app-dialog v-if="AppDialogVisible" @templateAppData='templateAppData' ref="refAppDialogVisible"></app-dialog>
    </el-main>
  </el-container>
</template>
<script>
import { getTemplateArray, delTemplate, getTemplateInfo } from '@/api/safe/access/template'
// import splitPane from 'vue-splitpane'
import TemplateDialog from './components/TemplateDialog'
import AppDialog from './components/AppDialog.vue'

export default {
  name: 'safetemplate',
  // splitPane
  components: { TemplateDialog, AppDialog },
  data () {
    return {
      TemplateDialogVisible: false,
      AppDialogVisible: false,
      templateList: [],
      expandedList: [], // tree默认展开项
      appList: [],
      appIndex: {},
      nameStr: '',
      appStr: '',
      appNode: [],
      lang: this.$i18n.locale,
      buttonWidthFlag: false,
      props: {
        label: 'showtitle',
        children: 'children'
      }
    }
  },
  created () {
    this.templateAppData()
  },
  methods: {
    templateAppData () {
      getTemplateArray().then(res => {
        if (res.status === 0) {
          this.templateList = res.info
          for (let item of this.templateList) {
            if (item.title === '自定义模板') {
              for (let value of item.children) {
                value.deleteFlag = true
              }
            }
          }
        }
      })
    },
    nodeClick (data, node, item) {
      if (!data.children) {
        this.appList = [data]
        this.buttonWidthFlag = data.deleteFlag
      }
    },
    nodeExpand (data) {
      this.expandedList.push(data.title) // 在节点展开是添加到默认展开数组
    },
    nodeCollapse (data) {
      this.expandedList.splice(this.expandedList.indexOf(data.title), 1) // 收起时删除数组里对应选项
    },
    // 多选按钮
    handleSelectionChange (data) {
      var nameStr = ''
      for (var item of data) {
        if (nameStr === '') {
          nameStr = item.name
        } else {
          nameStr = nameStr + '@#@' + item.name
        }
      }
      this.nameStr = nameStr
    },
    // 列表
    listData (data) {
      getTemplateInfo({ name: data }).then(res => {
        if (res.status === 0) {
          this.appList = res.info
        }
      })
    },
    // 添加按钮
    dialogVisible (title, data) {
      this.TemplateDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refTemplateDialogVisible.init(title, data)
      })
    },
    appDialogVisible (data) {
      this.AppDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refAppDialogVisible.init(data)
      })
    },
    deleteApp (data) {
      this.$confirm(this.$t('您是否要删除所有选中的数据？'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        delTemplate({ name: data.title }).then(res => {
          if (res.status === 0) {
            this.$message({
              message: this.$t('删除成功'),
              type: 'success'
            })
            this.templateAppData()
            this.appList = []
          }
        })
      })
    }
  }
}
</script>
<style lang="less">
.templateContainer {
  height: calc(100vh - 138px);
}

.templatePaneL {
  padding: 0;
  margin: 0;
  background-color: #fff;
  font-size: 18px;
  border-right: 1px solid #ddd;
  width: 240px !important;
}

.templateTree {
  margin-top: 10px;
  // overflow-x: scroll;
  // height: calc(100vh - 185px);
  // margin-right: 10px;
  // line-height: 22px;
  min-width: 230px;
  display: inline-block;

  .el-tree-node {
    >.el-tree-node__children {
      overflow: unset;
    }
  }
}

.templateBorder {
  width: 230px !important;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  height: calc(100vh - 185px);
}
</style>
